import React, { useReducer } from "react";
import { useNavigate } from "react-router-dom";
import { Form, Col, Input, Row, Button, Divider } from "antd";
import { LeftOutlined, AlignLeftOutlined } from "@ant-design/icons";
import axios from "axios";
import ShopModel from "./ShopModel";
import CuiTable from "./CuiTable";
import CancelModel from "../../../common/CancelModel";
import FormEdit from "../../../common/FormEdit";
import "./index.css";

const initialState = {
  shopModelStatus: false,
  cancelModelStatus: false,
  shop: { bNo: "", name: "" },
  cuiList: [{}],
};
const reducer = (state, action) => {
  console.log("模态框传入", action);
  switch (action.type) {
    case "changeShopModel":
      return {
        ...state,
        shopModelStatus: action.status,
      };
    case "changeShopName":
      return {
        ...state,
        shop: action.name,
      };
    case "changeCui":
      return {
        ...state,
        cuiList: action.cuiList,
      };
    case "changeCancelModel":
      return {
        ...state,
        cancelModelStatus: action.status,
      };
    default:
  }
};

export default function PoiManageList() {
  /**
   * 设置选择门店模态框
   */
  const [store, dispatch] = useReducer(reducer, initialState);
  let navigation = useNavigate();
  console.log("更改后的", store);

  const [form] = Form.useForm();
  function saveOrder(values) {
    axios({
      headers: {
        tenantId: 500,
        userId: 11111,
      },
      method: "post",
      url: `http://localhost:9103/order/catering`,
      data: {
        ...values,
      },
    })
      .then((data) => {
        return true;
      })
      .catch((data) => {
        console.log("错误信息", data);
      });
  }

  const getFields = () => {
    return (
      <React.Fragment>
        <Col span={24}>
          <div className="headAddShop">
            <Row>
              <Col span={8}>
                <LeftOutlined
                  style={{
                    fontSize: 30,
                    paddingLeft: 10,
                    paddingTop: 10,
                    paddingBottom: 10,
                  }}
                />
              </Col>
              <Col
                span={8}
                style={{ paddingLeft: 100, paddingTop: 10, paddingBottom: 10 }}
              >
                <span style={{ center: 30, fontSize: 20 }}>下单</span>
              </Col>

              <Col
                span={8}
                style={{
                  paddingTop: 10,
                  paddingBottom: 10,
                  paddingRight: 10,
                  paddingLeft: 160,
                }}
              >
                <AlignLeftOutlined />
              </Col>
            </Row>
          </div>
        </Col>

        {/** 基本信息 */}
        <Col span={24}>
          <div className="headlineClass">基本信息</div>
        </Col>

        <Col span={24}>
          <Row>
            <Col span={12}>
              <Form.Item>
                <Row className="divfix">
                  <Col span={8} className="leftCommDiv">
                    门店
                  </Col>
                  <Col span={10}>
                    <Input
                      value={store.shop.name}
                      style={{
                        width: "100%",
                        borderTopRightRadius: 0,
                        borderBottomRightRadius: 0,
                      }}
                    />
                  </Col>
                  <Col span={6}>
                    <Button
                      onClick={() => {
                        dispatch({ type: "changeShopModel", status: true });
                      }}
                      style={{
                        background: "red",
                        width: "100%",
                        borderTopLeftRadius: 0,
                        borderBottomLeftRadius: 0,
                      }}
                    >
                      选择
                    </Button>
                  </Col>
                </Row>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Row className="divfix">
                <Col span={8} className="leftCommDiv">
                  座位号
                </Col>
                <Col span={16}>
                  <Form.Item
                    name="tableNo"
                    rules={[
                      { required: true, message: "请填写座位号" },
                      { type: "string", max: 10, message: "长度太大" },
                    ]}
                  >
                    <Input
                      style={{
                        width: "100%",
                        borderTopRightRadius: 10,
                        borderBottomRightRadius: 10,
                      }}
                    />
                  </Form.Item>
                </Col>
              </Row>
            </Col>
          </Row>
        </Col>

        <Col span={24}>
          <Row>
            <Col span={12}>
              <Row className="divfix">
                <Col span={8} className="leftCommDiv">
                  用餐人数
                </Col>
                <Col span={16}>
                  <Form.Item
                    name="customerCount"
                    rules={[
                      { required: true, message: "用餐人数" },
                      { pattern: /^[0-9]+$/, message: "请填写数字" },
                      { max: 3, message: "长度太大" },
                    ]}
                  >
                    <Input
                      style={{
                        width: "100%",
                        borderTopRightRadius: 10,
                        borderBottomRightRadius: 10,
                      }}
                    />
                  </Form.Item>
                </Col>
              </Row>
            </Col>
            <Col span={12}>
              <Row className="divfix">
                <Col span={8} className="leftCommDiv">
                  备注
                </Col>
                <Col span={16}>
                  <Form.Item
                    name="comment"
                    rules={[
                      { required: true, message: "请填写备注" },
                      { max: 20, message: "长度太大" },
                    ]}
                  >
                    <Input
                      style={{
                        width: "100%",
                        borderTopRightRadius: 10,
                        borderBottomRightRadius: 10,
                      }}
                    />
                  </Form.Item>
                </Col>
              </Row>
            </Col>
          </Row>
        </Col>
        {/** 菜品信息 */}
        <Col span={24}>
          <div className="headlineClass">菜品信息</div>
        </Col>

        <Col span={24}>
          <CuiTable data={store} dispatch={dispatch} />
        </Col>
        <Divider />
      </React.Fragment>
    );
  };

  function jsonFormatpl(values) {
    /**
     * 计算订单总价
     */
    let sum = 0;
    store.cuiList.forEach((element) => {
      sum = sum + element.unitPrice * element.count;
    });
    let items = [];
    items = store.cuiList.map((element, index) => {
      return {
        seqNo: index + 1,
        quantity: element.count,
        productId: element.id,
      };
    });

    const obj = {
      shopBusinessNo: store.shop.bNo,
      tableNo: values.tableNo,
      customerCount: values.customerCount,
      totalPrice: sum,
      comment: values.comment,
      items: items,
    };

    return obj;
  }

  const onFinish = (values) => {
    saveOrder(jsonFormatpl(values));
  };

  return (
    <div>
      <FormEdit
        form={form}
        onFinish={onFinish}
        initialValues={{
          shopName: store.shop.name,
        }}
        name="订单下单页面"
        getFields={getFields()}
        resetFields={() => {
          dispatch({ type: "changeCancelModel", status: true });
        }}
        saveBack={() => {
          form.submit((e) => {
            saveOrder(jsonFormatpl(e));
          });
          navigation("/order/list");
        }}
      />
      <ShopModel store={store} dispatch={dispatch} />
      <CancelModel store={store} dispatch={dispatch} path="/order/list" />
    </div>
  );
}
